<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="title" content="惊蛰自用小图床">
    <meta name="keywords" content="惊蛰,图床，免费图床,免费图片托管服务,码云">
    <meta name="description" content="使用码云的api达到免费图床的作用-免费图片托管服务">
    <title>惊蛰自用小图床</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- 引入 layui.css -->
    <link href="https://www.layuicdn.com/layui/css/layui.css" rel="stylesheet">
    <!-- 引入 layui.js -->
    <script src="https://cdn.bootcdn.net/ajax/libs/layui/2.6.8/layui.min.js"></script>
    <style>
        .upload-div {
            width: 100%;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            align-content: center;
            flex-direction: column;
        }

        #test10 {
            width: 50vw;
            height: 50vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            box-shadow: 1px 1px 3px rgb(0 0 0 / 50%);
            background-color: rgba(255, 255, 255, 0.7);
        }

        .upload-div>div {
            color: white;
            display: flex;
            flex-direction: column;
            align-content: center;
            align-items: center;
        }

        ul {
            display: flex;
            flex-wrap: nowrap;
            justify-content: flex-end;
        }

        ul>li:first-child {
            position: absolute !important;
            left: 25px;
        }

        #uploadDemoView {
            width: 25vw;
        }
    </style>
    <script type="text/javascript"
        src="https://cdn.bootcss.com/jquery-backstretch/2.0.4/jquery.backstretch.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>
    <script src="/js/index.js"></script>
</head>

<body>
    <div>
        <ul class="layui-nav">
            <li class="layui-nav-item"><a href="/">免费图床</a></li>
            <li class="layui-nav-item"><a href="https://gitee.com/jingzhewl/code-cloud-chart-bed-code">本站源码</a></li>
            <li class="layui-nav-item layui-this"><a href="javascript:;">主页</a></li>
            <li class="layui-nav-item"><a href="/fileList">图库</a></li>
            <li class="user-center layui-nav-item" style="display: none;">
                <a href="javascript:;">个人中心</a>
                <dl class="layui-nav-child">
                    <dd><a href="/user">个人信息</a></dd>
                    <dd><a href="">修改密码</a></dd>
                    <dd><a href="javascript:;" onclick="loginout()">退出</a></dd>
                </dl>
            </li>
            <li class="user-center layui-nav-item" style="display: none;">
                <a href="/login">登录</a>
            </li>
        </ul>
    </div>
    <div class="upload-div">
        <div class="layui-upload-drag" id="test10">
            <i class="layui-icon"></i>
            <p>点击上传，或将文件拖拽到此处</p>
            <div class="layui-hide" id="uploadDemoView">
                <hr>
                <img src="" alt="上传成功后渲染" style="max-width: 50%">
            </div>
        </div>
        <div>
            <span>点击按钮可以复制图片的链接</span>
            <span class="image-path"></span>
            <a id="image-path" class="bot_copy layui-btn layui-btn-primary" data-clipboard-text="">点我复制</a>
        </div>
    </div>

    <script>
        var layer = null;
        layui.use(['upload', 'element', 'layer'], function () {
            var $ = layui.jquery,
                upload = layui.upload,
                element = layui.element;

            layer = layui.layer;

            //拖拽上传
            upload.render({
                elem: '#test10',
                url: '/addFile', //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
                exts: 'jpg|png|jpeg|bmp|gif|webp|psd|svg|tiff',
                size: 60000,
                data: {
                    "token": window.sessionStorage.getItem('token'),
                    "branch": window.sessionStorage.getItem('branch'),
                    "owner": window.sessionStorage.getItem('owner'),
                    "repo": window.sessionStorage.getItem('repo')
                }, before: function (obj) { //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                    if (!window.sessionStorage.getItem('email')) {
                        layer.alert('您还未登录');
                        return false;
                    }
                },
                done: function (res) {
                    if (res.content) {
                        layer.msg('上传成功');
                        console.log(res)
                        console.log(res)
                        setTimeout(function () {
                            layui.$('#uploadDemoView').removeClass('layui-hide').find('img')
                                .attr('src',
                                    'https://gitee.com/' + window.sessionStorage.getItem('owner') + '/' + window.sessionStorage.getItem('repo') + '/raw/' + window.sessionStorage.getItem('branch') + '/' + res
                                        .content.path + '');
                        }, 1000);
                        $("#image-path").attr('data-clipboard-text',
                            'https://gitee.com/' + window.sessionStorage.getItem('owner') + '/' + window.sessionStorage.getItem('repo') + '/raw/' + window.sessionStorage.getItem('branch') + '/' + res
                                .content.path + '');

                        $(".image-path").html('https://gitee.com/' + window.sessionStorage.getItem('owner') + '/' + window.sessionStorage.getItem('repo') + '/raw/' + window.sessionStorage.getItem('branch') + '/' + res
                            .content.path + '');
                    } else {
                        layer.alert('配置信息不正确，' + res.message);
                    }

                }
            });

        });


        $.backstretch(
            [
                "https://api.mtyqx.cn/api/random.php"
            ], {
            fade: 750,
            duration: 4000,
            speed: 500
        }
        );

        $(function () {
            var clipboard = new ClipboardJS('#image-path');
            clipboard.on('success', function (e) {
                console.log(e);
                layer.alert('复制成功')
            });
            clipboard.on('error', function (e) {
                console.log(e);
                layer.alert('复制失败，请手动复制')
            });
        })
    </script>
</body>

</html>